<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 100px auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">dddd</div>
    <script>
        document.addEventListener("DOMContentLoaded", (event) => {
            gsap.registerPlugin(ScrollTrigger)
            // gsap code here!
            const box = document.getElementById("box")
            // 创建一个补间动画
            const tween = gsap.to(box, {
                scale: 1.5,
                rotation: 360,
                backgroundColor: 'purple',
                // duration: 1,
                ease: 'Power4.easeInOut'
            });
            // 鼠标悬停时播放动画
            box.addEventListener('mouseenter', () => {
                tween.play();
            });
            // 鼠标移开时反向播放动画
            box.addEventListener('mouseleave', () => {
                tween.reverse();
            });
        })
    </script>
</body>
</html>